<template>
  <div class="g6-process-container">
    <!-- <panel :elements="elements" /> -->
    <graph ref="graph" :data="data" />
    <tool-bar @edit="handleEdit" @save="handleSave">
      <template slot="btn">
        <div
          @click.stop="handleAdd"
          class="btn-save poi sz"
          v-if="!!config.drapButton"
        >
          {{ config.drapButton.name }}
        </div>
      </template>
    </tool-bar>
    <context-menu @edit="handleEdit" />
  </div>
</template>

<script>
import G6 from "@antv/g6";
import Panel from "./__components__/widgets/panel/panel";
import Graph from "./__components__/widgets/graph/graph";
import ToolBar from "./__components__/widgets/toolbar/toolbar";
import ContextMenu from "./__components__/widgets/contextmenu/contextmenu";
import registerBehavior from "./__components__/behavior";
import registerShape from "./__components__/shape";
import store from "./__components__/store";
import mixins from "../mixins.js";
export default {
  name: "G6Process",
  mixins: [mixins],
  components: {
    Panel,
    Graph,
    ToolBar,
    ContextMenu,
  },
  data() {
    return {
      data: "",
      graph: null,
    };
  },
  mounted() {
    if (this.config.drapButton) {
      this.config.drapButton.key = "drop_" + this.config.key;
    }
    registerBehavior(G6);
    registerShape(G6);
    this.initGraph();
  },

  methods: {
    handleAdd() {
      this.setModelForm(this.config.drapButton);
    },
    initGraph() {
      this.graph = this.$refs.graph.drawGraph(G6);
    },

    handleEdit(data) {
      this.$emit("edit", data);
    },

    handleSave(data) {
      this.$emit("save", data);
    },

    initData(value) {
      store.readData(value);
    },

    resetStack() {
      store.resetStack();
    },

    hasChange() {
      return store.hasChange();
    },
  },
};
</script>

<style scoped>
.g6-process-container {
  height: 600px;
  width: 100%;
  /* box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1); */
  position: relative;
  overflow: hidden;
  padding-top: 48px;
  box-sizing: border-box;
  border: 1px solid #eee;
  background: #fff;
}

.g6-process-container ::-webkit-scrollbar {
  width: 5px;
  background-color: #eee;
}
.g6-process-container ::-webkit-scrollbar-thumb {
  border-radius: 0;
  background: #ccc;
}
.g6-process-container ::-webkit-scrollbar-track {
  border-radius: 0;
}
.btn-save {
  padding: 9px 15px;
  font-size: 14px;
  text-align: center;
  color: #fff;
  background: #1890ff;
  border-radius: 3px;
  position: absolute;
  right: 10px;
  min-width: 100px;
}
</style>